<template>
  <div class="member-detail" style="padding: 20px;font-size: 14px;min-height: 100px;" v-loading="listLoading">
    <el-row :gutter="20" v-if="list">
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <b>基本资料</b>
            <el-button style="float: right; padding: 3px 5px" plain @click="toggleBlacklistHandle">
              {{list.status == 1 || list.status == 2 ? "加入黑名单" : "移出黑名单"}}
            </el-button>
          </div>
          <div style="padding: 20px;background: #eabfbf;">
            <el-row type="flex" align="middle">
              <el-col :span="12">{{list.user}}</el-col>
              <el-col :span="12">
                余额
                <div style="margin-top: 5px;"><b style="margin-right: 5px;">{{list.money || 0.00}}</b>
                  <el-link type="danger" :underline="false" @click="dialogVisible = true;">充值</el-link>
                </div>
              </el-col>
            </el-row>
          </div>
          <div style="margin-top: 20px;margin-left: 5px;">认证姓名：{{list.name}}</div>
          <div style="margin-top: 10px;margin-left: 5px;">身份证号：{{list.id_card}}</div>
          <div style="margin-top: 10px;margin-left: 5px;">注册时间：{{list.created_at}}</div>
          <div style="margin-top: 10px;margin-left: 5px;padding-bottom: 50px;">
            上级邀请人：{{list.parent_name.user}}（{{list.parent_name.name}}）</div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="padding: 2px 15px;display: inline-block;cursor: pointer;" :style="tabActive == 0 ? 'font-weight: 700' : ''"
              @click="tabChange(0)">推荐关系</span><span style="padding: 2px 15px;display: inline-block;cursor: pointer;"
              :style="tabActive == 1 ? 'font-weight: 700' : ''" v-if="list.shopping && list.shopping.length > 0 && list.shopping[0].type == 1"
              @click="tabChange(1)">企业店铺</span><span style="padding: 2px 15px;display: inline-block;cursor: pointer;"
              :style="tabActive == 2 ? 'font-weight: 700' : ''" @click="tabChange(2)"
              v-if="list.shopping && list.shopping.length > 0 && list.shopping[0].type == 0">分销小店</span>
          </div>
          <!-- 推荐关系 -->
          <div v-if="tabActive == 0">
            <div style="padding: 20px;background: #b9c7f9;">
              <el-row type="flex" align="middle">
                <el-col :span="8">
                  累计佣金
                  <div style="margin-top: 5px;">
                    <b>{{list.commission.total_commission}}</b>
                  </div>
                </el-col>
                <el-col :span="8">
                  已提现佣金
                  <div style="margin-top: 5px;">
                    <b>{{list.commission.deposit_commission}}</b>
                  </div>
                </el-col>
                <el-col :span="8">
                  推荐订单
                  <div style="margin-top: 5px;">
                    <b style="color: red;">{{list.commission.recommend_order}}</b>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="margin-top: 20px;margin-left: 5px;">推荐人数：{{list.first.length + list.second.length}}人 <el-link type="danger"
                style="margin-left: 20px;" @click="handlelook" v-if="list.first.length + list.second.length > 0">
                查看下级列表</el-link>
            </div>
            <div style="margin-top: 10px;margin-left: 5px;">一级：{{list.first.length}}人</div>
            <div style="margin-top: 10px;margin-left: 5px;padding-bottom: 77px;">二级：{{list.second.length}}人</div>
          </div>
          <!-- 企业店铺 -->
          <div v-if="tabActive == 1">
            <div style="padding: 20px;background: #b9c7f9;">
              <el-row type="flex" align="middle">
                <el-col :span="8">
                  累计利润
                  <div style="margin-top: 5px;">
                    <b>{{list.shopping_total.total_profit}}</b>
                  </div>
                </el-col>
                <el-col :span="8">
                  店铺商品数
                  <div style="margin-top: 5px;">
                    <b>{{list.shopping_total.product_num}}</b>
                  </div>
                </el-col>
                <el-col :span="8">
                  店铺订单
                  <div style="margin-top: 5px;">
                    <b style="color: red;">{{list.shopping_total.order_num}}</b>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="margin-top: 20px;margin-left: 5px;">店铺名称：{{list.shopping[0].shopping_name}}</div>
            <div style="margin-top: 10px;margin-left: 5px;">企业名称：{{list.shopping[0].company_name}}</div>
            <div style="margin-top: 10px;margin-left: 5px;">法人：{{list.shopping[0].company_user}}</div>
            <div style="margin-top: 10px;margin-left: 5px;">身份证号：{{list.shopping[0].id_card}}</div>
            <div style="margin-top: 10px;margin-left: 5px;">开通时间：{{list.shopping[0].created_at}}</div>
            <div style="margin-top: 10px;margin-left: 5px;">保证金：{{list.shopping[0].security_deposit}}</div>
          </div>
          <!-- 分销小店 -->
          <div v-if="tabActive == 2">
            <div style="padding: 20px;background: #b9c7f9;">
              <el-row type="flex" align="middle">
                <el-col :span="8">
                  累计利润
                  <div style="margin-top: 5px;">
                    <b>0</b>
                  </div>
                </el-col>
                <el-col :span="8">
                  小店商品数
                  <div style="margin-top: 5px;">
                    <b>0</b>
                  </div>
                </el-col>
                <el-col :span="8">
                  小店订单
                  <div style="margin-top: 5px;">
                    <b style="color: red;">0</b>
                  </div>
                </el-col>
              </el-row>
            </div>
            <div style="margin-top: 20px;margin-left: 5px;">小店名称：{{list.shopping[0].shopping_name}}
            </div>
            <div style="margin-top: 10px;margin-left: 5px;">开通时间：{{list.shopping[0].created_at}}</div>
            <div style="margin-top: 10px;margin-left: 5px;padding-bottom: 77px;">保证金：{{list.shopping[0].security_deposit}}</div>
          </div>
        </el-card>
      </el-col>
      <el-col :span="24">
        <el-card class="box-card" style="margin-top: 20px;">
          <div slot="header" class="clearfix">
            <b>交易统计</b>
            <small style="margin-left: 15px;color: #aaa;">最近下单时间：{{list.order.latest_time || "--"}}</small>
            <el-button style="float: right; padding: 5px" plain>订单列表</el-button>
          </div>
          <el-row type="flex" align="middle" style="padding: 20px 0;">
            <el-col :span="6" style="text-align: center;">
              累计消费金额
              <div style="margin-top: 10px;">
                <b>{{list.order.consume_money}}</b>
              </div>
            </el-col>
            <el-col :span="6" style="text-align: center;">
              累计参拍订单数
              <div style="margin-top: 10px;">
                <b>{{list.order.order_num}}</b>
              </div>
            </el-col>
            <el-col :span="6" style="text-align: center;">
              出价商品数
              <div style="margin-top: 10px;">
                <b>{{list.order.offer_product_num}}</b>
              </div>
            </el-col>
          </el-row>
        </el-card>
      </el-col>
    </el-row>

    <el-dialog title="充值" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="dialogVisible" width="40%">
      <el-input v-model="topUpNumber" type="number" class="input-with-select input-spin">
        <!-- <el-select slot="prepend" v-model="topUpValue">
          <el-option label="+" value="+" />
          <el-option label="-" value="-" />
        </el-select> -->
      </el-input>
      <div style="margin-top: 40px;text-align: center;">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="danger" @click="handleSubmit">确认充值</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import {
    getMemberDetail,
    updateMember
  } from "@/api/common.js"

  export default {
    name: 'memberDetail',
    data() {
      return {
        listLoading: false,
        list: undefined,
        tabActive: 0,
        topUpNumber: 0,
        topUpValue: '+',
        dialogVisible: false
      }
    },
    created() {
      this.getList();
    },
    methods: {
      tabChange(e) {
        this.tabActive = e
      },
      handlelook() {
        let data = {
          first: this.list.first,
          second: this.list.second
        }
        localStorage.setItem("memberDetail", JSON.stringify(data))
        this.$router.push('/member/subordinate/id')
      },
      toggleBlacklistHandle() {
        let msg = `您确认要把账号“${this.list.user}”加入黑名单吗？拉黑后，该账号将无法访问。`;
        if (this.list.status == 0) {
          msg = `您确认要把账号“${this.list.user}”移出黑名单吗？`;
        }
        this.$confirm(msg, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // status- 2:正常 0：黑名单 1:白名单
          updateMember(this.list.id, { status: this.list.status == 0 ? 2 : 0 }).then(() => {
            this.$notify({
              title: '成功',
              message: '操作成功',
              type: 'success',
              duration: 2000
            })
            this.list.status = this.list.status == 0 ? 2 : 0
          });
        }).catch(() => { })
      },
      // 充值
      handleSubmit() {
        if (!this.topUpNumber || (this.topUpNumber && this.topUpNumber <= 0)) {
          this.$message.error("请输入大于0的数");
          return false;
        }
        let money = 0;
        if (this.list.money > 0) {
          money = Number(this.list.money) + Number(this.topUpNumber);
        } else {
          money = Number(this.topUpNumber);
        }
        updateMember(this.$route.params.id, { money }).then((res) => {
          this.$notify({
            title: '成功',
            message: '充值成功',
            type: 'success',
            duration: 2000
          })
          this.dialogVisible = false;
          this.getList();
        })
      },
      getList() {
        this.listLoading = true
        getMemberDetail(this.$route.params.id).then(response => {
          this.list = response.data
        }).finally(() => {
          this.listLoading = false
        })
      }
    }
  }
</script>

<style>
  .member-detail .el-select .el-input {
    width: 100px;
  }
</style>
